Video

Probleem

We vertrekken van het wireframe waarop we HTML elementen hebben aangebracht:

We gaan twee flex-containers nodig hebben. Het header element is een flex-container en het nav element ook.

Oplossing

1. Wat hieraan voorafgaat
   1. CSS case study biblio - probleemdefinitie
   2. CSS case study biblio - voorbereiding
   3. CSS lay-out met flexbox case study biblio - homepagina
2. We beginnen met het header element
   1. We denken mobile first, d.w.z. we maken eerst de CSS voor mobiele toestellen met een smallere viewport. In dat geval hebben we het logo links en de navigatie rechts, de links in de navigatie staan dan onder elkaar. Dus dat maakt voor de header niet veel uit als we in mobile- of in computerscherm modus zitten. Voor beiden hebben we slechts 1 stijlregel nodig. We passen de CSS voor het header element aan om er een flex-container van te maken:

      body>header {
          flex-grow: .1;
          flex-shrink: .1;
          flex-basis: 2em;
          display: flex;
      }
      
      

   2. We tonen het logo niet meer als achtergrond maar maken er een img element in:

      <a class="logo" href="/index.html"><img src="image/logobookshelf.png"></a>

      We verwijderen de volgende regel uit de CSS stijlregel voor de .logo klasse:

      background-image: url(../image/logobookshelf.png); 
      background-size: contain; 
      background-repeat: no-repeat;

   3. Het logo gaan we niet meer met float positioneren. Het staat nu in een flex-container.

      .logo {
          display: block;
          /* float: left; niet meer nodig, staat in een flex-container */
          /* height: 100%; 
          width: 15%;  niet meer nodig, we gebruiken flex-grow en flex-shrink */
          flex-grow: 0.2;
          flex-shrink: 0;
          flex-basis: 160px;
          background-image: url(../image/logobookshelf.png);
          background-size: contain;
          background-repeat: no-repeat;
      
      }

   4. We denken mobile first en stellen de stijlregel voor het nav element op voor een smalle viewport waarbij de links onder elkaar staan:

      .horizontal-nav {
          /* width: 85%;
          height: 100%;
          padding: 1rem 0 0 0; is nu gecentreerd door align-self */
          flex-grow: 0;
          flex-shrink: 0;
          flex-basis: auto;
          align-self: center;
          display: flex;
          flex-direction: column;
      }

   5. De stijlregel voor de afbeelding:

      .logo img {
          height: 130px
      }

   6. Voor een computerscherm voegen we de volgende media-query toe:

      @media (min-width: 800px) {
          .logo img {
              height: 180px;
          }
          .horizontal-nav {
              flex-direction: row;
          }
      }

   7. De rest blijft onveranderd:

      .horizontal-nav a {
          margin-left: 4rem;
          text-decoration: none;
          cursor: pointer;
          color: #E20513;
          /* AP rood */
          font-size: 1.4rem;
          position: relative;
      }
      
      .horizontal-nav a::after {
          position: absolute;
          top: 0;
          left: 0;
          content: '';
          border-bottom: #AD0F09 solid 3px;
          /* AP donker rood */
          width: 0;
          background: transparent;
          transition: width .2s ease, border-bottom .3s ease;
          text-align: center;
          height: 2rem;
      }
      
      .horizontal-nav a:hover::after {
          width: 100%;
      }
      
      

3. We wijzigen alleen de laatste stijlregel. We moeten ervoor zorgen dat de link onderlijnd blijft wanneer een bepaalde pagina gekozen is. Dat vergt twee wijzigingen, 1 in de HTML en 1 in de CSS:
   1. HTML
      We voegen aan de HTML link een selected klasse toe op de pagina waarmee de link overeenkomt. Op de homepagina is dat:

      <header class="control-panel">
          <a class="logo" href="index.html"><img src="image/logobookshelf.png"></a>
          <nav class="horizontal-nav">
              <a href="index.html" class="selected">Home</a>
              <a href="#">Boeken</span></a>
              <a href="#">Bestel</span></a>
          </nav>
      </header>

   2. CSS

      .horizontal-nav a:hover::after, .horizontal-nav a.selected:after{
          width: 100%;
      }